<template lang="jade">
  div.program_preview
    div.weui_media_box.weui_media_text
      div.weui_media_title
        div.title {{program.name}}
        span 总课时{{program.workouts.length}}节
          span(v-for="(key, value, index) in typeCount") , {{value}}{{key}}节
      div.weui_media_desc {{program.description}}

    div.preview_list.weui_panel
      div.weui_cell(v-for="(item, index) in program.workouts")
        div.workout(v-bind:class="item.type === 'PT' ? 'PT_workout' : 'VPT_workout'") {{index+1}}: {{item.name}}
</template>
<script>

import {mapState} from 'vuex'

export default {
  methods: {},
  computed: {
    ...mapState(['program']),
    typeCount: function() {
      let typeCount = {}
      this.program.workouts.map(item => {
        typeCount[item.type] = typeCount[item.type] || 0;
        typeCount[item.type]++;
      })
      return typeCount;
    }
  },
  props: [],
  watch: {},
  components: {},
  events: {},
  data() {
    return {
    }
  },
  mounted() {}
}
</script>
<style scoped>
.program_preview .weui_media_box{
  padding-top: 0;
}

.program_preview .weui_media_title .title {
  word-wrap: normal;
}

.preview_list .workout {
  width: 100%;
  padding: 2px 2px 2px 6px;
  color: #fff;
  border-radius: 5px;
}

.preview_list .weui_cell::before {
  border: none;
}

.PT_workout {
  background-color: #04be02;
}

.VPT_workout {
  background-color: #1bb1de;
}
</style>
